<template>
  <div class="disk-item">
    <div class="disk-icon-wrapper">
      <img
        v-if="props.diskImg"
        :src="props.diskImg"
        alt="disk icon"
        class="icon-image"
      />
      <div v-else class="icon-placeholder">
        <div class="status-light"></div>
      </div>
    </div>

    <div class="disk-info">
      <span class="disk-name">{{ props.diskName }}</span>

      <div class="progress-track">
        <div class="progress-bar" :style="barStyle"></div>
      </div>

      <span class="disk-stats">{{ infoText }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

// 1. 定义组件的 props 接口
interface Props {
  diskImg?: string; // 磁盘图标 URL (可选)
  diskName: string; // 磁盘名称 (例如 "rome (D:)")
  diskMax: string; // 最大容量 (例如 "419 GB")
  diskNow: string; // 当前已用容量 (例如 "106 GB")
  limitPercent: string; // 警告阈值 (例如 "80%")
}

// 2. 接收 props
const props = defineProps<Props>();

// 3. 核心逻辑 (Computed)

/**
 * 辅助函数：从 "419 GB" 这样的字符串中提取数值 419
 */
const parseSize = (sizeStr: string): number => {
  return parseFloat(sizeStr) || 0;
};

/**
 * 辅助函数：从 "419 GB" 这样的字符串中提取单位 "GB"
 */
const getUnit = (sizeStr: string): string => {
  // 匹配非数字、非小数点、非空格的字符
  const match = sizeStr.match(/[^\d.\s]+/);
  return match ? match[0] : "GB"; // 默认单位
};

// 将 props 字符串转换为可计算的数值
const maxNum = computed(() => parseSize(props.diskMax));
const nowNum = computed(() => parseSize(props.diskNow));
const limitNum = computed(() => parseSize(props.limitPercent) / 100);

// 计算可用容量 (数值)
const availableNum = computed(() => {
  const diff = maxNum.value - nowNum.value;
  // 处理浮点数精度问题并确保不为负数
  return Math.max(0, parseFloat(diff.toFixed(1)));
});

// 获取单位 (假设 diskMax 和 diskNow 单位一致)
const unit = computed(() => getUnit(props.diskMax));

// 格式化可用的容量文本 (例如 "313 GB")
const availableText = computed(() => {
  // 根据原图，可用空间似乎是整数
  return `${availableNum.value.toFixed(0)} ${unit.value}`;
});

// 最终显示的底部信息文本 (例如 "313 GB 可用, 共 419 GB")
const infoText = computed(() => {
  return `${availableText.value} 可用, 共 ${props.diskMax}`;
});

// 计算已用百分比 (0-100)
const usedPercent = computed(() => {
  if (maxNum.value === 0) return 0;
  return (nowNum.value / maxNum.value) * 100;
});

// 检查是否超过阈值
const isOverLimit = computed(() => {
  if (maxNum.value === 0) return false;
  // (已用 / 最大) > 阈值
  return nowNum.value / maxNum.value > limitNum.value;
});

// 动态计算进度条的样式 (宽度和颜色)
const barStyle = computed(() => ({
  width: `${usedPercent.value}%`,
  // 使用 Element Plus 的主题色
  backgroundColor: isOverLimit.value ? "#F56C6C" : "#409EFE", // 危险红 vs 默认蓝
}));
</script>

<style scoped>
/* 整个组件的容器，使用 flex 布局 */
.disk-item {
  display: flex;
  align-items: center;
  gap: 12px; /* 图标和信息之间的间距 */
  font-family: "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
  color: #e0e0e0; /* 浅色文字，适应深色背景 */
  padding: 8px;
}

/* 1. 左侧图标区域 */
.disk-icon-wrapper {
  flex-shrink: 0; /* 防止图标被压缩 */
}

/* 传入的图片样式 */
.icon-image {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

/* 默认占位符图标 (模仿原图) */
.icon-placeholder {
  width: 42px;
  height: 42px;
  background-color: #777; /* 灰色机箱 */
  border: 1px solid #999;
  border-radius: 4px;
  position: relative; /* 用于定位状态灯 */
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 占位符上的绿色状态灯 */
.status-light {
  position: absolute;
  bottom: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  background-color: #67c23a; /* Element Plus 成功绿 */
  border-radius: 50%;
  box-shadow: 0 0 3px #67c23a;
}

/* 2. 右侧信息区域 */
.disk-info {
  flex-grow: 1; /* 占据所有剩余空间 */
  width: 100%; /* 确保能撑满 */
}

/* 2.1 磁盘名称 */
.disk-name {
  display: block;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 5px;
}

/* 2.2 进度条轨道 */
.progress-track {
  width: 100%;
  height: 20px;
  background-color: #d3d3d3; /* 浅灰色轨道 (同原图) */
  border-radius: 4px;
  overflow: hidden; /* 确保内部 bar 不会溢出圆角 */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* 2.2 进度条 */
.progress-bar {
  height: 100%;
  border-radius: 4px 0 0 4px; /* 左侧圆角 */
  /* 宽度和背景色由 :style 动态提供 */
  transition: width 0.4s ease, background-color 0.4s ease;
}

/* 2.3 磁盘统计 */
.disk-stats {
  display: block;
  font-size: 14px;
  color: #c0c0c0; /* 稍暗的文字 */
  margin-top: 5px;
}
</style>
